<template>
  <div class="max-w-2xl p-4 mx-auto">
    <h2 class="mb-4 text-xl font-bold">每日一言/毒鸡汤</h2>
    
    <div class="flex gap-2 mb-4">
      <button 
        @click="switchMode('motivational')" 
        class="px-4 py-2 text-white bg-blue-500 rounded"
        :class="{ 'opacity-50': mode !== 'motivational' }">
        正能量语录
      </button>
      <button 
        @click="switchMode('chicken')" 
        class="px-4 py-2 text-white bg-pink-500 rounded"
        :class="{ 'opacity-50': mode !== 'chicken' }">
        毒鸡汤
      </button>
      <button 
        @click="switchMode('programming')" 
        class="px-4 py-2 text-white bg-purple-500 rounded"
        :class="{ 'opacity-50': mode !== 'programming' }">
        程序员语录
      </button>
    </div>
    
    <div class="relative p-8 my-4 text-center border rounded-lg shadow-lg bg-gradient-to-r" 
      :class="{
        'from-blue-900/10 to-indigo-900/10 dark:from-blue-800/20 dark:to-indigo-800/20': mode === 'motivational',
        'from-pink-900/10 to-red-900/10 dark:from-pink-800/20 dark:to-red-800/20': mode === 'chicken',
        'from-gray-900/10 to-purple-900/10 dark:from-gray-800/20 dark:to-purple-800/20': mode === 'programming'
      }">
      <div class="absolute text-2xl top-3 left-3 opacity-30">"</div>
      <div class="font-serif text-xl">{{ currentQuote }}</div>
      <div class="absolute text-2xl right-3 bottom-3 opacity-30">"</div>
    </div>
    
    <div class="flex justify-center gap-4">
      <button @click="getRandomQuote" class="px-4 py-2 text-white bg-green-500 rounded">
        再来一条
      </button>
      <button @click="copyQuote" class="px-4 py-2 text-white bg-purple-500 rounded">
        复制
      </button>
      <button @click="shareQuote" class="px-4 py-2 text-white bg-blue-500 rounded">
        分享
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

type QuoteMode = 'motivational' | 'chicken' | 'programming'

const quotes = {
  motivational: [
    '成功不是终点，失败也不是终结，最重要的是继续前进的勇气。',
    '当你想要放弃的时候，想想是什么让你坚持到现在。',
    '不要等待机会，而要创造机会。',
    '成功的秘诀是开始。',
    '相信自己，你比想象中更强大。'
  ],
  chicken: [
    '不要因为走得太远，就忘记了为什么出发。',
    '生活不是等待暴风雨过去，而是学会在雨中跳舞。',
    '加油，你是最胖的！',
    '别人笑我太疯癫，我笑他人看不穿。',
    '你以为躺平就不会被雨淋，其实是会被淹。'
  ],
  programming: [
    '代码就像幽默，如果需要解释，那就不好笑了。',
    '在编程的世界里，昨天的最佳实践就是今天的反模式。',
    '没有什么问题是一个循环解决不了的，如果有，那就两个。',
    '程序员的三大美德：懒惰、急躁和傲慢。',
    '调试代码比写代码更难，所以如果你写代码写得很聪明，那你就不够聪明到可以调试它。'
  ]
} as const

const mode = ref<QuoteMode>('motivational')
const currentQuote = ref('')

function switchMode(newMode: QuoteMode) {
  mode.value = newMode
  getRandomQuote()
}

function getRandomQuote() {
  const quoteList = quotes[mode.value]
  const randomIndex = Math.floor(Math.random() * quoteList.length)
  currentQuote.value = quoteList[randomIndex]
}

function copyQuote() {
  navigator.clipboard.writeText(currentQuote.value)
    .then(() => {
      alert('已复制到剪贴板')
    })
    .catch(err => {
      console.error('复制失败:', err)
      alert('复制失败，请手动复制')
    })
}

function shareQuote() {
  if (navigator.share) {
    navigator.share({
      title: '每日一言',
      text: currentQuote.value,
    })
    .catch(err => {
      console.error('分享失败:', err)
    })
  } else {
    copyQuote()
    alert('当前浏览器不支持分享功能，已复制到剪贴板')
  }
}

// 初始化时获取一条语录
onMounted(() => {
  getRandomQuote()
})
</script> 